<template>

  <div style="max-width: 960px;margin: 0 auto;">
    <el-form ref="loginForm"
             :model="form"
             :rules="rules"
             class="login-box"
             v-loading="loading"
             element-loading-text="登录ing..."
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-col :span="12">
        <h4 style="margin-top: 0px;">企业标准信息公共服务平台-管理系统</h4>
      </el-col>
      <el-col :span="12">
        <el-form-item class="grid-content bg-purple" style="margin-left: 70px">
          <el-link type="primary" style="font-size: 12px;margin-top: 0px;font-size: 12px"><a href="/" style="color: #409EFF;">返回首页</a></el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="primary" style="font-size: 12px;margin-top: 0px;font-size: 12px"><a href="/userLogin" style="color: #409EFF;">忘记密码?</a></el-link>
        </el-form-item>
      </el-col>
      <h3 class="login-title">用户登录</h3>
      <el-form-item label="账号" prop="username"  label-width="80px">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password"  label-width="80px">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>

      <el-form-item label="验证码" prop="authCode" label-width="80px">
      <el-col :span="12">
        <el-input style="width: 100%" type="authCode" placeholder="请输入验证码" v-model="form.authCode"/>
      </el-col>
      <el-col :span="6">
        <img style="margin-top: 3px;margin-left: 5px" class="verify" @click.prevent="refresh()"
             ref="codeImg"/>
      </el-col>
    </el-form-item>


      <el-form-item  label-width="20px">
        <el-button style="margin-top: 20px;width: 400px" type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>

    </el-form>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            style="height: 290px;line-height: 0px"
            center
    >
      <span>请按提示输入信息</span>
      <span slot="footer" class="dialog-footer" style="margin-right: 50px">
        <el-button style="float: right;padding: 10px 20px" type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import Header from "../../components/Header";
    import {getAdminAuthorization, userLogin} from "../../api/userMG";

    export default {
        components: {Header},
        name: "Content",
        data() {
            return {
                form: {},
                loading: false,
                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                    ],
                    password: [
                        {required: true, message: '密码不可为空', trigger: 'blur'}
                    ],
                    authCode: [
                        {required: true, message: '验证码不可为空', trigger: 'blur'}
                    ]
                },

                // 对话框显示和隐藏
                dialogVisible: false
            }
        },
        methods: {
            // 刷新验证码
            refresh() {
                this.$axios.get('/api/v1/user/kaptcha', { responseType: 'blob' }).then(res => {
                    console.log("========赋值===========");
                    this.$refs.codeImg.src = window.URL.createObjectURL(res.data);
                    this.form.authCodeKey = res.headers['auth-code'];
                    console.log("res.headers==>",res.headers);
                });
            },
            onSubmit(formName) {
                const _this = this;
                // 为表单绑定验证功能
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log("========调用login接口");
                        console.log("form",_this.form);
                        userLogin(_this.form).then(res => {
                                _this.loading = true;
                                //后台定义 返回数据 ok == 登录成功
                                if (res.code === 200) {
                                    console.log("res===>",res);
                                    window.localStorage.JWT_TOKEN = res.data.Authorization;
                                    console.log("storage.JWT_TOKEN", window.localStorage.JWT_TOKEN);
                                    _this.loading = false;
                                    getAdminAuthorization().then(res=>{
                                        if (res.code === 200) {
                                            window.localStorage.role = 'admin';// 设置角色
                                            _this.$router.push({name: "Admin"});
                                        }
                                    });
                                }
                            }
                        );
                    } else {
                        this.dialogVisible = true;
                        return false;
                    }
                });
            }
        },
        created() {
            //获取验证码图片
            this.$axios.get('/api/v1/user/kaptcha', { responseType: 'blob' }).then(res => {
                console.log("========赋值===========");
                this.$refs.codeImg.src = window.URL.createObjectURL(res.data);
                this.form.authCodeKey = res.headers['auth-code'];
                console.log("res.headers==>",res.headers);
            });
        }
    }
</script>

<style scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 420px;
    height: 400px;
    margin-top: 50px;
    margin-left: 200px;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .element.style {
    margin-left: 20px;
  }

  .login-title {
    text-align: center;
    color: #303133;
  }

  a {
    text-decoration: none;
    font-size: 13px;
    width: auto;
  }
</style>
